<template>
	<view class="map">
		<!-- #ifdef MP-WEIXIN -->
		<!-- <u-navbar  title="" :is-back="false">
			<view class="inputBox">
				<u-search placeholder="搜索" v-model="keyword" :show-action="false" @search="searchBtn"></u-search>
			</view>
			<view class="rightIcon" slot="right">
				<u-icon name="bell" size="50" color="#666"></u-icon>
			</view>
		</u-navbar> -->
		<view class="searchBox" @click="tosearch" :style="{'top':locationTop + 'px'}">
			<image class="searchIcon" src="../../static/find/01.png" mode=""></image>
			<text class="searchTxt">搜索</text>
		</view>
		<view class="mapBox">
			<map style="width: 100%;height: 100vh;" :latitude="latitude" :longitude="longitude" scale="14" :markers="covers" @markertap="markertap">
			</map>
		</view>
		<!-- <view class="nearbyBox" :style="{'top':locationTop + 36 +'px'}">
			<view class="nearbyItem" v-for="(item,index) in 4" :style="{color:color}">丽人/美发</view>
		</view> -->
		<view class="screenBox" :style="{'top':locationTop + 52 +'px'}"> 
			<view @click="isScreen=!isScreen" class="screenNameBox">
				<view class="screenName">筛选</view>
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
			<view class="screenItemBox" v-if="isScreen">
				<view class="screenItem" :class="{currentColor:currentIndex==index}" v-for="(item,index) in screenList" :key="index" @click="selectItem(index)">{{item.name}}</view>
			</view>
		</view>
		<view class="screenBox1" :style="{'top':locationTop + 52 +'px'}">
			<view class="screenNameBox" @click="isScreen1=!isScreen1">
				<view class="screenName">全部分类</view>
				<u-icon name="arrow-down" size="20"></u-icon>
			</view>
			<view class="screenItemBox" v-if="isScreen1">
				<view class="screenItem" :class="{currentColor:currentIndex==index}" v-for="(item,index) in cateList" @click="selectItem(index)">{{item.name}}</view>
			</view>
		</view>
		<view class="locationBox" @click="locationBtn">
			<view class="locationIcon">
				<image src="/static/index/location.png" mode=""></image>
			</view>
			<view class="locationName">定位</view>
		</view>
		<view class="listBox" @click="toProductList">
			<u-icon name="list-dot" size="40" color="#FFAC3F"></u-icon>
			<view class="listName">列表</view>
		</view>
		<view class="MerchantBox" v-if="iscovers">
			<view class="MerchantItem">
				<view class="Merchant_top">
					<view class="MerchantImage">
						<image src="" mode=""></image>
					</view>
					<view class="MerchantInfo">
						<view class="MerchantName">瑞幸咖啡(巨大创意产业园店)</view>
						<view class="addressBox">
							<view class="addreesName">咖啡厅</view>
							<view class="addressNum">步行298m</view>
						</view>
						<view class="carefulBox">
							<view class="carefulItem">可停车</view>
						</view>
						<view class="DiscountBox">
							<view class="DiscountIcon">惠</view>
							<view class="Discountprice">23.8元</view>
							<view class="Discounttext">三件套单人套餐</view>
						</view>
					</view>
				</view>
				<view class="Merchant_B">
					<view class="Bottom_Box">
						<view class="bottom_L">
							<view class="leftItem">
								<u-icon name="search" size="35" color="#8A8A8A"></u-icon>
								<view class="searchName">搜周边</view>
							</view>
							<view class="leftItem">
								<u-icon name="star" size="35" color="#8A8A8A"></u-icon>
								<view class="searchName">收藏</view>
							</view>
							<view class="leftItem">
								<u-icon name="phone" size="35" color="#8A8A8A"></u-icon>
								<view class="searchName">电话</view>
							</view>
						</view>
						<view class="bottom_R" @click="toNavigation">
							<view class="NavigationBtn">立即前往</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				isScreen:false,
				iscovers:false,
				latitude:"",
				longitude:"",
				id:0,
				title: 'map',
				covers: [{
					id:1,
				  latitude: "",
				  longitude: "",  
				  iconPath: '/static/index/map.png',
					callout:{
						content:"点击了我",
						fontSize:16,
						color:"#333",
						borderRadius:10,
						bgColor:"#fff",
						padding:20
					}
				}],
				keyword:'',
				color:"#E63072",
				screenList:[{name:"查看达人"},{name:"查看优惠"},{name:"查看测评"}],
				currentIndex:-1,
				markerId:"",
				locationTop:0,
				isScreen1:false,
				cateList:[]
				// #endif
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			//微信小程序胶囊按钮信息
			let res = uni.getMenuButtonBoundingClientRect();
			//console.log(res);
			this.locationTop = res.top;
			// #endif
			// #ifdef APP-PLUS
			const subNVue = uni.getSubNVueById('mapId');
			subNVue.show()
			// #endif
			// #ifdef MP-WEIXIN
			this.getLocation();
			this.getCateList();
			// #endif
		},
		methods: {
			// #ifdef MP-WEIXIN
			getCateList(){
				this.$u.api.industryList().then(res=>{
					this.cateList = res.data.list;
				})
			},
			tosearch(){
				uni.navigateTo({
					url:"/pages/pagefour/pages/Product-list/Product-list"
				})
			},
			toProductList(){
				uni.navigateTo({
					url:"/pages/pagefour/pages/Product-list/Product-list"
				})
			},
			toNavigation(){
				let latitude,longitude;
				for(let i=0; i<this.covers.length; i++){
					if(this.markerId = this.covers[i].id){
						latitude = this.covers[i].latitude
						longitude = this.covers[i].longitude
					}
				}
				console.log(latitude,longitude);
				uni.openLocation({
				  latitude: Number(latitude),
				  longitude: Number(longitude),
					name:"润德大厦",
					address:"详细地址",
				  success: function () {
				    // console.log('success');
				  }
				});
			},
			locationBtn(){
				this.getLocation();
			},
			//获取位置
			getLocation(){
				let that = this;
				console.log(123)
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
								that.longitude = res.longitude
								that.latitude = res.latitude
								for(let i=0;i<that.covers.length;i++){
									that.covers[i].latitude = res.latitude
									that.covers[i].longitude = res.longitude
								}
				    },
						fail(err) {
							console.log(err);
							// #ifdef APP-PLUS
							uni.getSystemInfo({
								success(res) {
									//console.log(res);
								  if(res.platform=='ios'){ //IOS
								    plus.runtime.openURL("app-settings://");
								  } else if (res.platform=='android'){ //安卓
								    let main = plus.android.runtimeMainActivity();
								    let Intent = plus.android.importClass("android.content.Intent");
								    let mIntent = new Intent('android.settings.ACTION_SETTINGS');
								    main.startActivity(mIntent);
								  }
								}
							});
							// #endif
						}
				})
			},
			markertap(e){
				// console.log(e);
				this.markerId = e.detail.markerId;
				this.iscovers = true;
			},
			//筛选
			selectItem(index){
				this.currentIndex = index
				this.isScreen = false
			},
			//搜索
			searchBtn(){
				console.log(this.keyword);
			}
			// #endif
		}
	}
</script>

<style scoped lang="less">
// #ifdef MP-WEIXIN
.map{
	width: 100vw;
	height: 100vh;
	.searchBox{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		// top: 60upx;
		left: 24upx;
		width: 152upx;
		height: 56upx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 34upx;
		z-index: 998;
		.searchIcon{
			width: 32upx;
			height: 32upx;
			margin-right: 8upx;
		}
		.searchTxt{
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			line-height: 40upx;
			color: #333333;
		}
	}
	.mapBox{
		width: 100vw;
		height: 100vh;
		map{
			width: 100%;
			height: 100%;
		}
	}
	.nearbyBox{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		// top: 100upx;
		left: 0;
		right: 0;
		width: 750upx;
		padding: 32upx 24upx;
		z-index: 998;
		.nearbyItem{
			background: #FFFFFF;
			opacity: 1;
			border-radius: 32upx;
			padding: 16upx 24upx;
			// margin-right: 24upx;
			margin-bottom: 24upx;
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			// color: #E63072;
		}
	}
	.screenBox{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 300upx;
		left: 24upx;
		width: 136upx;
		height: 56upx;
		background: #FFFFFF;
		border: 2upx solid #FFAC3F;
		opacity: 1;
		border-radius: 28upx;
		z-index: 999;
		.screenNameBox{
			display: flex;
			align-items: center;
			justify-content: center;
			.screenName{
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-right: 8upx;
			}
		}
		.screenItemBox{
			position: absolute;
			top: 60upx;
			width: 160upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20upx;
			padding: 8upx 24upx;
			z-index: 99999;
			.screenItem{
				padding: 24upx 0;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.currentColor{
				color: #FFAC3F;
			}
		}
	}
	.screenBox1{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 300upx;
		right: 24upx;
		width: 150upx;
		height: 56upx;
		background: #FFFFFF;
		border: 2upx solid #FFAC3F;
		opacity: 1;
		border-radius: 28upx;
		z-index: 99999999;
		.screenNameBox{
			display: flex;
			align-items: center;
			justify-content: center;
			.screenName{
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-right: 8upx;
			}
		}
		.screenItemBox{
			position: absolute;
			top: 60upx;
			width: 542upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20upx;
			padding: 8upx 24upx;
			z-index: 99999;
			right: 0;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			max-height: 700upx;
			overflow-y: auto;
			.screenItem{
				padding: 24upx;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.currentColor{
				color: #FFAC3F;
			}
		}
	}
	.locationBox{
		position: fixed;
		bottom: 600upx;
		right: 24upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 114upx;
		height: 114upx;
		background: #FFFFFF;
		border-radius: 50%;
		opacity: 1;
		z-index: 999;
		.locationIcon{
			width: 30upx;
			height: 30upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.locationName{
			font-size: 22upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-top: 8upx;
		}
	}
	.listBox{
		position: fixed;
		bottom: 450upx;
		right: 24upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 114upx;
		height: 114upx;
		background: #FFFFFF;
		border-radius: 50%;
		opacity: 1;
		z-index: 999;
		.listName{
			font-size: 24upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFAC3F;
			// margin-top: 8upx;
		}
	}
	.MerchantBox{
		position: fixed;
		bottom:0;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		.MerchantItem{
			width: 654upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20upx 20upx 0 0;
			.Merchant_top{
				display: flex;
				align-items: center;
				padding: 32upx 32upx 24upx 32upx;
				.MerchantImage{
					width: 144upx;
					height: 144upx;
					border-radius: 8upx;
					background-color: #007AFF;
					margin-right: 16upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.MerchantInfo{
					width: calc(654upx - 224upx);
					.MerchantName{
						width: 100%;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.addressBox{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-top: 16upx;
					}
					.carefulBox{
						display: flex;
						align-items: center;
						margin-top: 16upx;
						.carefulItem{
							background: #F5F5F5;
							opacity: 1;
							border-radius: 8upx;
							padding: 8upx;
							display: inline-block;
							margin-right: 8upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #666666;
						}
					}
					.DiscountBox{
						display: flex;
						align-items: center;
						margin-top: 16upx;
						.DiscountIcon{
							width: 28upx;
							height: 28upx;
							background: #FFAC3F;
							opacity: 1;
							border-radius: 8upx;
							text-align: center;
							line-height: 28upx;
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
							margin-right: 8upx;
						}
						.Discountprice{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-right: 10upx;
						}
						.Discounttext{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
			.Merchant_B{
				border-top: 2upx solid #F5F5F5;
				.Bottom_Box{
					display: flex;
					align-items: center;
					padding: 16upx 32upx;
					.bottom_L{
						width: calc(100% - 230upx);
						display: flex;
						align-items: center;
						.leftItem{
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-right: 56upx;
							.searchName{
								font-size: 16upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								margin-top: 8upx;
							}
						}
					}
					.bottom_R{
						width: 230upx;
						height: 68upx;
						border: 2upx solid #FFAC3F;
						opacity: 1;
						border-radius: 34upx;
						.NavigationBtn{
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 68upx;
							text-align: center;
							color: #FFAC3F;
						}
					}
				}
			}
		}
	}
}
// #endif
</style>
